@import "./lib-variable";

@mixin flex($justify: flex-start, $align-items: center, $dir: row, $wrap: nowrap, $align-content: stretch) {
  display: flex;
  flex-flow: $dir $wrap;
  justify-content: $justify;
  align-items: $align-items;
  align-content: $align-content;
}

@mixin justify($font-size: 0) {
  text-align: justify;
  text-justify: distribute-all-lines;
  text-align-last: justify;
  -moz-text-align-last: justify;
  -webkit-text-align-last: justify;
  font-size: $font-size;
}

@mixin tl($direction: left) {
  text-align: $direction;
  text-align-last: $direction;
}

@mixin ver($font-size: 16px, $direction: middle) {
  display: inline-block;
  vertical-align: $direction;
  font-size: $font-size;
}

@mixin linear($color1: #000, $color2: #fff, $angle: 180deg) {
  background: ($color1+$color2)/2;
  background: linear-gradient($angle, $color1, $color2);
}

@mixin animate($type: all, $sec: 0.2s, $animation: ease-in) {
  transition: $type $sec $animation;
}

@mixin no-wrap($text: ellipsis) {
  text-overflow: $text;
  overflow: hidden;
  white-space: nowrap;
}

@mixin font-dpr($font-size) {
  font-size: $font-size;
  [data-dpr="2"] & {
    font-size: $font-size * 2;
  }
  [data-dpr="3"] & {
    font-size: $font-size * 3;
  }
}

// @mixin juzhong($boolean: true) {
//   @if $boolean {
//     top: 50%;
//     transform: translate3d(0, -50%, 0);
//   }
//   @else {
//     left: 50%;
//     transform: translate3d(-50%, 0, 0);
//   }
// }
@mixin juzhong($condition: else) {
  @if $condition==vertical {
    top: 50%;
    transform: translate3d(0, -50%, 0);
  }
  @else if $condition==middle {
    left: 50%;
    transform: translate3d(-50%, 0, 0);
  }
  @else {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
  }
}

